<template>
  <div class="app-container">
    <!--  查询  -->
    <el-form
      v-show="showSearch"
      :inline="true"
      :model="formInline"
      size="small"
      class="mt10"
    >
      <el-form-item label="设备名称">
        <el-input
          v-model="formInline.device_name"
          size="mini"
          clearable
          placeholder="请输入监控设备名称"
        />
      </el-form-item>

      <el-form-item label="站点" prop="site_id">
        <el-select
          v-model="formInline.site_id"
          placeholder="站点"
          clearable
          size="mini"
          @change="siteChange"
        >
          <el-option
            v-for="item in siteList"
            :key="item.name"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="groupList.length" label="分组" prop="device_group">
        <el-select
          v-model="formInline.device_group"
          placeholder="分组"
          clearable
          size="mini"
        >
          <el-option
            v-for="item in groupList"
            :key="item.group_name"
            :label="item.group_name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="addOrEdit(1)"
        >
          {{ $t('common.create') }}
        </el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>

    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      size="mini"
      :default-sort="{ prop: formInline.sort, order: formInline.order }"
      @sort-change="tableSortChange"
    >
      <el-table-column prop="device_name" label="设备名称" align="center" />
      <el-table-column prop="device_num" label="设备编号" align="center" />
      <el-table-column prop="site_name" label="站点名称" align="center" />
      <el-table-column prop="group_name" label="分组" align="center" />
      <el-table-column prop="device_typename" label="设备类型" align="center" />
      <el-table-column prop="camera" label="关联摄像" align="center" />
      <el-table-column prop="device_status" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.device_status == 1">在线</el-tag>
          <el-tag v-else type="danger">离线</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否参与计算" align="center">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.calculate === 1 ? '是' : '否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button
            type="info"
            size="mini"
            @click="addOrEdit(3, scope.row.id)"
          >
            详情
          </el-button>
          <el-button
            type="warning"
            size="mini"
            @click="addOrEdit(2, scope.row.id)"
          >
            修改
          </el-button>
          <el-button type="danger" size="mini" @click="del(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--   分页   -->
    <pagination
      :page-size="10"
      :current-page="formInline.offset"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    />

    <!--  详情组件  -->
    <div v-if="detailFlag">
      <Detail
        :id="detailId"
        :dialog-visible="detailFlag"
        :title="detailTitle"
        @close="close"
        @confirm="confirm"
      />
    </div>
    <!--  查看  -->
    <div v-if="infoFlag">
      <Info :id="infoId" :dialog-visible="infoFlag" @close="closeInfo" />
    </div>
  </div>
</template>

<script>
import {
  cameraList,
  deleteCamera,
  getDictionary1,
  getFileAllList,
  stationAllList,
} from '@/api/fileManage'
import Detail from './components/detail'
import Info from './components/info'

export default {
  name: 'filesManage.camera',
  components: {
    Detail,
    Info,
  },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      infoFlag: false, // 详情信息查看
      infoId: 0,
      detailTitle: '新增', // 模板组件
      detailFlag: false, // 模板组件
      detailId: 0, // 模板组件
      total: 0,
      tableData: [],
      // 站点列表
      siteList: [],
      // 分组列表
      groupList: [],
      // 分类列表:
      categoryList: [],
      // 搜索表单
      formInline: {
        sort: 'created_at',
        offset: 0,
        limit: 10,
        site_id: null,
        order: 'descending',
        device_name: '',
        device_group: null,
      },
    }
  },
  created() {
    this.getList()
    stationAllList().then((res) => {
      this.siteList = res.data.data
    })
    getDictionary1({
      pid: 0,
      limit: 500,
      offset: 0,
    }).then((res) => {
      this.categoryList = res.data.categories
    })
  },
  methods: {
    resetQuery() {
      this.formInline = {
        sort: 'created_at',
        offset: 0,
        limit: 10,
        site_id: null,
        order: 'descending',
        device_name: '',
        device_group: null,
      }
      this.siteList = []
      this.groupList = []
      this.getList()
    },
    /**
     * @description: 查询
     * @author: 书童
     */
    search() {
      this.formInline.offset = 0
      this.getList()
    },
    /**
     * @description: 删除
     * @author: 书童
     */
    del(id) {
      this.$confirm('是否要删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteCamera({ id }).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success',
          })
          this.getList()
        })
      })
    },
    /**
     * @description: 新增或编辑 模板
     * @author: 书童
     * @param: 1新增，2编辑
     */
    addOrEdit(num, id) {
      if (num === 1) {
        this.detailTitle = '新增'
        this.detailFlag = true
        // this.detailId = id
      } else if (num === 3) {
        this.infoId = id
        this.infoFlag = true
      } else {
        this.detailTitle = '编辑'
        this.detailId = id
        this.detailFlag = true
      }
    },
    /**
     * @description: 排序
     * @author: 书童
     */
    tableSortChange(column) {
      this.formInline.order = column.order ? column.order : 'ascending'
      this.formInline.sort = column.prop
      this.formInline.offset = 0
      this.getList()
    },
    //  获取数据参数列表
    getList() {
      cameraList(this.formInline).then((res) => {
        this.tableData = res.data.categories
        this.total = res.data.total
      })
    },
    // 跳转
    handleCurrentChange(val) {
      this.formInline.offset = val
      this.getList()
    },
    // 弹窗返回
    confirm() {
      this.close()
      this.getList()
    },
    //  关闭弹窗组件
    close() {
      this.detailFlag = false
      this.detailId = 0
    },
    closeInfo() {
      this.infoFlag = false
      this.infoId = 0
    },
    // 切换站点
    siteChange(value) {
      this.groupList = []
      getFileAllList({ site_id: value }).then((res) => {
        this.groupList = res.data.list
      })
    },
  },
}
</script>

<style lang='scss' scoped>
.cardH {
  height: 40px;
}
</style>
